<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui_font.css" />
    <link rel="stylesheet" type="text/css" href="../../css/news.css" />
    <link rel="stylesheet" type="text/css" href="../../css/frame3.css" />
    <style>
        html,
        body {
            background-color: #fff;
        }
        .panel{
            background-image: linear-gradient(to right, #C394FC ,#FBD0FC);
        }
       .nav{
           color: #FEFDFD;
           font-size: 18px;
          text-align: center;
          padding: 12px 10px;
       }
       .left-icon{
           width: 11px;
            float: left;
       }
       .info{
           padding: 13px 20px 23px 20px;
           display: flex;
           justify-content: flex-start;
       }
       .info .avatar{
           width: 43px;
           height: 43px;
           border-radius: 100px;
       }
       .info .msg{
           color: #FCF9FD;
           font-size: 14px;
            margin-left: 10px;
       }
       .content{
           background-color: #ffffff;
           border-radius: 10px;
           margin-top: -10px;
           padding: 20px 10px;
       }
       .title{
          text-align: center;
       }
       .title span{
           color: #333333;
           font-size: 18px;
           position: relative;
           text-align: center;
       }
       .title span::after{
           content: '';
           position: absolute;
           left: 25%;
           bottom: -5px;
           width: 50%;
           height: 5px;
           background-color: #2c2c2c;
           border-radius: 100px;
       }
       .card{
           display: flex;
           justify-content: flex-start;
           flex-wrap: wrap;
           padding: 20px 5px;
       }
        .item{
            width: 95px;
            height: 98px;
           border: 1px solid #6F6D6D;
           border-radius: 10px;
           color: #6F6D6D;
           text-align: center;
           margin: 5px;
       }
       .item .p1{
           color: #6F6D6D;
           font-size: 12px;
           margin-top: 13px;
       }
       .item .p2{
           color: #6F6D6D;
           font-size: 17px;
           margin: 4px 0 12px 0;
       }
       .item .p3{
           color: #6F6D6D;
           font-size: 10px;
       }
       .on{
           color: #B269FE;
           border-color: #B269FE;
       }
       .on .p1, .on .p2, .on .p3{
           color: #B269FE;
       }
       .btn{
           width: 95%;
           display: block;
           margin: 0 auto;
           font-size: 17px;
           color: #ffffff;
           border-radius: 100px;
           padding: 10px 0;
             background-image: linear-gradient(to right, #da69c0 ,#753ece);
            margin-bottom: 20px;
       }
       .tip{
           background-color: #f8f4fe;
           border-radius: 5px;
           margin-top: 10px;
           padding: 10px;
       }
       .smallt{
           color: #333333;
           font-size: 13px;
           text-align: center;
           margin-bottom: 10px;
       }
       .wenzi{
           color: #999;
           font-size: 10px;
       }
       .tequan{
            display: flex;
           justify-content: flex-start;
           flex-wrap: wrap;
           text-align: center;
       }
       .quan{
           width: 33%;
           margin-bottom: 10px;
       }
       .quan img{
           width: 40px;
           margin-bottom: 4px;
       }
    </style>
</head>

<body>
    <div id="view" v-cloak>
       <div class="panel">
           <div class="info">
               <img :src="returnImg(userInfo.head_portrait)" class="avatar"/>
               <div>
                   <div class="msg">{{userInfo.name}}</div>
                   
               </div>
           </div>
        </div>
        <div class="content">
            <div class="tip">
                <p class="smallt">--购买需知，请仔细阅读--</p>
                <p class="smallt" style="color: red;">{{userInfo.offline_pay_text}}</p>
            </div>
           
            <div class="tip qrcode" >
                <img  :src="returnImg(shoukuangma)" class="ic"  style="max-width: 100%; height: auto; width: auto\9; width: auto;">
            </div>
            
        </div>
     </div>
    <script type="text/javascript" src="../../script/api.js"></script>
    <script type="text/javascript" src="../../script/jquery.js"></script>
    <script type="text/javascript" src="../../script/ffkj.js"></script>
    <script type="text/javascript" src="../../script/vue.js"></script>
    <script type="text/javascript" src="../../script/update.js"></script>
    <script type="text/javascript" src="../../script/zhifu.js"></script>
    <script type="text/javascript">
        var view = new Vue({
            el: '#view',
            data: {
                user_id: null,
                userInfo: {},
                userGrade : '',
                shoukuangma : '',
                list: [],
                nowGrade: {

                }

            },
            methods: {
                _url(param, url) {
                    _url(param, url);
                },
                // 返回图片路径
                returnImg(url) {
                    return returnImg(url);
                },
                setNow(item){
                    this.nowGrade = item
                }

            }
        })
        apiready = function() {
            view.user_id = $api.getStorage('userid');
            view.filename = api.pageParam['filename'];
            getInfo()
            getUserInfo()
            getshoukuangma(view.filename);
        }

        function getshoukuangma(filename) {
            let app = view
            _ajax('api/index/shoukuanma', function(ret, err) {
                if (ret && ret.code == 200) {
                    app.shoukuangma = ret.data.img
                    
                }
            }, {
                filename: filename
            })
        }
        // 获取用户信息
        function getUserInfo() {
            _getUser(function(ret) {
                view.userInfo = ret.result
                view.userGrade = ret.result.is_noble == 1 ? (ret.result.noble.name ? ret.result.noble.name : "") : "会员"
            })
        }

        function getInfo() {
            let app = view
            _ajax('api/grade/nobleList', function(ret, err) {
                if (ret && ret.code == 200) {
                    app.list = ret.data
                    app.nowGrade = ret.data[0]
                }
            }, {
                user_id: app.user_id
            })
        }

        function payIt() {
            let app = view
            _ajax('api/grade/isReBuy', function(ret, err) {
                if (ret && ret.code == 200) {
                    submit()
                }else{
                    var obj = {
                        msg: '您已经是'+app.nowGrade.name+'，再次购买会增加更高的魅力值，吸引更多的关注。',
                        btn: ['确认'],
                    }
                    _confirm(obj, function(bIndex) {
                        if (bIndex == 1) {
                            submit()
                        }
                    })
                    return;
                }
            }, {
                types: 1,
                id: view.nowGrade.style_id,
                user_id: app.user_id
            })
        }

        function on_line(){
            var money = view.nowGrade.price;
            showPayWay(money, function(index) {
                console.log(index)
                if (index != -1) {
                    _loading();
                    if (index == 0) {
                        var method = 3;
                        var payType = 'pay_w';
                    } else if (index == 1) {
                        var method = 2;
                        var payType = 'pay_a';
                    } else if (index == 2) {
                        var method = 1;
                    }
                }
            })

            
            if($(".qrcode").is(':hidden')){  
                $(".qrcode").show();
            }else{
                $(".qrcode").hide();
            }
        }


        // 购买会员
        function submit() {
            // 1余额|2支付A|3vx
            var money = view.nowGrade.price;
            showPayWay(money, function(index) {
                console.log(index)
                if (index != -1) {
                    _loading();
                    if (index == 0) {
                        var method = 3;
                        var payType = 'pay_w';
                    } else if (index == 1) {
                        var method = 2;
                        var payType = 'pay_a';
                    } else if (index == 2) {
                        var method = 1;
                    }
                    _ajax('api/order/noble', function(ret, err) {
                        if (ret && ret.code == 200) {
                            if (method != 1) {
                                openOtherPay({
                                    payType: payType,
                                    info: ret.data,
                                    money: money
                                }, ()=>{
                                    _getUser(function(ret) {
                                        view.userInfo = ret.result
                                        view.userGrade = ret.result.is_noble == 1 ? (ret.result.noble.name ? ret.result.noble.name : "") : "会员"
                                    })
                                })
                            } else {
                                _msg(ret.msg);
                            }
                        } else {
                            _msg(ret.msg);
                        }
                    }, {
                        user_id: $api.getStorage('userid'),
                        id: view.nowGrade.style_id,
                        method: method
                    })
                }
            })
        }

    </script>
</body>

</html>